<style scoped>
 .wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 4px 7px;
  line-height: 1.5;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
 }
 .picker {
  width: 100%;
  height: 32px;
  line-height: 1.5;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
 }

</style>
<style>
 .droperInner {
  width: auto !important;
 }
</style>

<template>
<span :class="{'w-100':true}">
  <Input v-if="['text','tel','url','email'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model.lazy="editValue" @on-change="change"
         v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  >
    <Icon v-if="!!config.editor.prefix" slot="prefix" :type="config.editor.prefix?config.editor.prefix:''" @click="click"></Icon>
    <Icon v-if="!!config.editor.suffix" slot="suffix" :type="config.editor.suffix?config.editor.suffix:''" @click="click"></Icon>
  </Input>
  <Input v-else-if="['textCompase'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'textCompase')"
         v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <span v-if="!!config.editor.prependText" slot="prepend">{{config.editor.prependText}}</span>
    <span v-if="!!config.editor.appendText" slot="append">{{config.editor.appendText}}</span>
  </Input>
  <Input v-else-if="['textPrepend'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'textPrepend')"
         v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <span slot="prepend">{{config.editor.prependText}}</span>
  </Input>
  <Input v-else-if="['textAppend'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'textAppend')"
         v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <span slot="append">{{config.editor.appendText}}</span>
  </Input>
  <Input v-else-if="['textSelect'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'textSelect')"
         v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <Select v-if="!!config.editor.prepend" slot="prepend" v-model="prependValue" :style="{width:config.editor.prependWidth+'px'}" @on-change="change($event,'textSelect')">
      <Option v-for="(item,i) in config.editor.prepend" :key="i" :value="item.value?item.value:item" :label="G_PickText(item&&item.label?item.label:item)">
        <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item&&item.label?item.label:item)}}
        <Icon :type="item.suffix?item.suffix:''"></Icon>
      </Option>
    </Select>
    <Select v-if="!!config.editor.append" slot="append" v-model="appendValue" :style="{width:config.editor.appendWidth+'px'}" @on-change="change($event,'textSelect')">
      <Option v-for="(item,i) in config.editor.append" :key="i" :value="item.value?item.value:item" :label="G_PickText(item&&item.label?item.label:item)">
        <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item&&item.label?item.label:item)}}
        <Icon :type="item.suffix?item.suffix:''"></Icon>
      </Option>
    </Select>
  </Input>
  <Input v-else-if="['textarea'].includes(config.editor.type)" :class="config.class" :style="config.style" v-model="editValue" @on-change="change"
         v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></Input>
  <Input v-else-if="config.editor.type==='password'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change" @on-blur="change"
         v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  >
    <Icon v-if="!!config.editor.prefix" slot="prefix" :type="config.editor.prefix?config.editor.prefix:''" @click="click"></Icon>
    <Icon v-if="!!config.editor.suffix" slot="suffix" :type="config.editor.suffix?config.editor.suffix:''" @click="click"></Icon>
  </Input>
  <Checkbox v-else-if="config.editor.type==='check'" :class="['wrapper hover:border-[#57a3f3]',config.class]" :style="config.style" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></Checkbox>
  <CheckboxGroup v-else-if="config.editor.type==='multiCheck'" :class="['wrapper',config.class]" :style="config.style" v-model="editValue" @on-change="change"
            :disabled="config.editor.disabled"
            :required="config.editor.required"
            :readonly="config.editor.readonly"
            :autofocus="config.editor.autofocus"
    >
      <Checkbox v-for="(item,i) in config.editor.options" :key="i" :label="item.value?item.value:item">
        <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item.label?item.label:item)}}
        <Icon :type="item.suffix?item.suffix:''"></Icon>
      </Checkbox>
  </CheckboxGroup>
  <RadioGroup v-else-if="config.editor.type==='radio'" :class="['wrapper',config.class]":style="config.style" v-model="editValue" @on-change="change"
            :disabled="config.editor.disabled"
            :required="config.editor.required"
            :readonly="config.editor.readonly"
            :autofocus="config.editor.autofocus"
    >
      <Radio v-for="(item,i) in config.editor.options" :key="i" :label="item.value?item.value:item">
        <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item.label?item.label:item)}}
        <Icon :type="item.suffix?item.suffix:''"></Icon>
      </Radio>
  </RadioGroup>
  <Select v-else-if="config.editor.type==='select'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change"
      :transfer="true"
      :placeholder="G_PickText(config.editor.placeholder)"
      :filterable="config.editor.filterable"
      :filter-by-label="config.editor.filterByLabel"
      :clearable="config.editor.clearable"
      :disabled="config.editor.disabled"
      :readonly="config.editor.readonly"
      :label-in-value="config.editor.labelInValue"
      :placement="config.editor.placement"
      :allow-create="config.editor.allowCreate"
      :prefix="config.editor.prefix"
  >
    <Option v-for="(item,i) in config.editor.options" :key="i" :value="item.value?item.value:item" :label="G_PickText(item.label?item.label:item)">
      <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item.label?item.label:item)}}
      <Icon :type="item.suffix?item.suffix:''"></Icon>
    </Option>
  </Select>
  <Select v-else-if="config.editor.type==='icoSelect'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change"
      :transfer="true"
      :placeholder="G_PickText(config.editor.placeholder)"
      :filterable="config.editor.filterable"
      :filter-by-label="config.editor.filterByLabel"
      :clearable="config.editor.clearable"
      :disabled="config.editor.disabled"
      :readonly="config.editor.readonly"
      :label-in-value="config.editor.labelInValue"
      :placement="config.editor.placement"
      :allow-create="config.editor.allowCreate"
      :prefix="config.editor.prefix"
  >
    <Option v-for="(item,i) in config&&config.editor&&config.editor.options?config.editor.options:icoOptions" :key="i" :value="item.value?item.value:item" :label="G_PickText(item.label?item.label:item)">
      <Icon :type="item.value?item.value:item"></Icon>
      {{G_PickText(item.label?item.label:item)}}
    </Option>
  </Select>
  <Select v-else-if="config.editor.type==='multiSelect'" :class="config.class" :style="config.style" v-model="editValue"
    @on-change="change"
    :transfer="true"
    :multiple="true"
    :placeholder="G_PickText(config.editor.placeholder)"
    :filterable="config.editor.filterable"
    :filter-by-label="config.editor.filterByLabel"
    :clearable="config.editor.clearable"
    :disabled="config.editor.disabled"
    :readonly="config.editor.readonly"
    :label-in-value="config.editor.labelInValue"
    :placement="config.editor.placement"
    :allow-create="config.editor.allowCreate"
    :prefix="config.editor.prefix"
  >
    <Option v-for="(item,i) in config.editor.options" :key="i" :value="item.value?item.value:item" :label="G_PickText(item.label?item.label:item)">
      <Icon :type="item.prefix?item.prefix:''"></Icon>
        {{G_PickText(item.label?item.label:item)}}
      <Icon :type="item.suffix?item.suffix:''"></Icon>
    </Option>
  </Select>
  <DatePicker v-else-if="config.editor.type==='date'" type="date" :class="['picker',config.class]" :style="config.style" show-week-numbers transfer
            format="yyyy-MM-dd" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></DatePicker>
  <TimePicker v-else-if="config.editor.type==='time'" type="time" :class="['picker',config.class]" :style="config.style" show-week-numbers  transfer format="HH:mm:ss" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></TimePicker>
  <DatePicker v-else-if="config.editor.type==='datetime'" type="datetime" :class="['picker',config.class]" :style="config.style" show-week-numbers  transfer format="yyyy-MM-dd HH:mm:ss" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></DatePicker>
  <DatePicker v-else-if="config.editor.type==='datetimerange'" type="datetimerange" :class="['picker',config.class]" :style="config.style" show-week-numbers  transfer format="yyyy-MM-dd HH:mm:ss" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></DatePicker>
  <DatePicker v-else-if="config.editor.type==='daterange'" type="daterange" :class="['picker',config.class]" :style="config.style" show-week-numbers  transfer format="yyyy-MM-dd" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></DatePicker>
  <ColorPicker v-else-if="config.editor.type==='color'" :class="['w-100',config.class]" :style="config.style" v-model="editValue" :transfer="true" :transfer-class-name="'droperInner'" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  />
  <div v-else-if="config.editor.type==='switch'" :class="['wrapper']">
    <i-switch :class="[config.class]" :style="config.style" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></i-switch>
  </div>
  <Input v-else-if="config.editor.type==='array'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'array')"
            v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <Icon v-if="!!config.editor.prefix" slot="prefix" :type="config.editor.prefix?config.editor.prefix:''"></Icon>
    <Icon v-if="!!config.editor.suffix" slot="suffix" :type="config.editor.suffix?config.editor.suffix:''"></Icon>
  </Input>
  <Input v-else-if="config.editor.type==='numberArray'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'numberArray')"
            v-bind.attrs="{...config.editor,type:'text',placeholder:G_PickText(config.editor.placeholder)}"
  >
    <Icon v-if="!!config.editor.prefix" slot="prefix" :type="config.editor.prefix?config.editor.prefix:''"></Icon>
    <Icon v-if="!!config.editor.suffix" slot="suffix" :type="config.editor.suffix?config.editor.suffix:''"></Icon>
  </Input>
  <InputNumber v-else-if="config.editor.type==='number'" :class="['wrapper',config.class]" :style="config.style" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder)}"
  ></InputNumber>
  <InputNumber v-else-if="config.editor.type==='percent'" :class="['wrapper',config.class]" :style="config.style" v-model="editValue" @on-change="change"
            v-bind.attrs="{...config.editor,type:'number',placeholder:G_PickText(config.editor.placeholder),'active-change':false}"
            :formatter="value=>`${Number(value*100).toFixed(config.editor.precision>=2?config.editor.precision-2:0)}%`"
            :parser="value=>value.indexOf('%')===-1?Number(value):Number(value.replace('%', ''))/100"
  ></InputNumber>
  <Input v-else-if="config.editor.type==='pi'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change($event,'pi')"
            v-bind.attrs="{...config.editor,type:'number',placeholder:G_PickText(config.editor.placeholder)}"
  ></Input>
  <Input v-else-if="config.editor.type==='link'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change"
             :type="'text'"
             :required="false"
             :placeholder="G_PickText(config.editor.placeholder)"
             :clearable="false"
             :disabled="config.editor.disabled"
             :readonly="true"
  >
    <Icon slot="suffix" type="md-arrow-dropright" @click="$emit('link',editValue)"/>
  </Input>
  <Cascader v-else-if="config.editor.type==='cascader'" :class="config.class" :style="config.style" v-model="editValue"  @on-change="change($event,'cascader')"
            :data="config.editor.options"
            :transfer="true"
            :placeholder="G_PickText(config.editor.placeholder)"
            :filterable="config.editor.filterable"
            :clearable="config.editor.clearable"
            :disabled="config.editor.disabled"
            :readonly="config.editor.readonly"
            :placement="config.editor.placement"
  ></Cascader>
  <Select v-else-if="config.editor.type==='icoSelect'" :class="config.class" :style="config.style" v-model="editValue" @on-change="change" @on-create="create"
      :transfer="true"
      :placeholder="G_PickText(config.editor.placeholder)"
      :filterable="config.editor.filterable"
      :filter-by-label="config.editor.filterByLabel"
      :clearable="config.editor.clearable"
      :disabled="config.editor.disabled"
      :readonly="config.editor.readonly"
      :label-in-value="config.editor.labelInValue"
      :placement="config.editor.placement"
      :allow-create="config.editor.allowCreate"
      :prefix="config.editor.prefix"
  >
    <Option v-for="(item,i) in config.editor.options?config.editor.options:icoOptions" :key="i" :value="item.value?item.value:item" :label="G_PickText(item.label?item.label:item)">
      <Icon :type="item.value?item.value:item"></Icon>
      {{G_PickText(item.label?item.label:item)}}
    </Option>
  </Select>
  <div v-else-if="config.editor.type==='imap'" style="width:100%;position: relative;">
    <Input :class="config.class" :style="config.style" v-model="editValue"
          v-bind.attrs="{...config.editor,placeholder:G_PickText(config.editor.placeholder),readonly:true,type:'text'}"
    >
      <Icon slot="append" :type="imapShow?'md-arrow-dropup':'md-arrow-dropdown'" @click.self.stop="imapShow=!imapShow"></Icon>
    </Input>
      <AtomDrop v-show="imapShow" eventsEnabled  v-starTransfer="true" style="padding:0px 2px !important;">
      <ul v-if="!!value&&!! Object.keys(value)" style="width:100%;overflow-y:auto;height:100px;" class="i-scrollbar-hide">
        <template v-for="k in Object.keys(value)">
          <li>
            <div style="width:100%;display:flex;align-items:center;">
              <span style="width:120px;">{{k}}</span>
              <span style="padding:0px 2px;">:</span>
              <span style="flex:1 1 auto;">{{value[k]}}</span>
              <Icon style="margin:0px 2px;" type="md-remove" color="red" @click.self.stop="$delete(value,k)"></Icon>
            </div>
          </li>
        </template>
      </ul>
      <div style="width:100%;display:flex;align-items:center;padding:2px 0px;">
        <div style="width:120px;display: inline-block;"><Input type="text" v-model="imapKey"></Input></div>
        <span style="padding:0px 2px;">:</span>
        <div style="flex:1 1 auto;display: inline-block;">
          <div v-if="imapValueType==='b'" :class="['wrapper']">
            <i-switch v-model="imapValue" :true-value="true" :false-value="false"></i-switch>
          </div>
          <Input type="number" v-else-if="imapValueType==='n'" v-model="imapValue"></Input>
          <Input v-else v-model="imapValue"></Input>
        </div>
        <RadioGroup v-model="imapValueType" style="margin:0px 2px;width:150px !important;">
          <Radio  label="s">s</Radio>
          <Radio  label="n">n</Radio>
          <Radio  label="b">b</Radio>
        </RadioGroup>
        <Icon  style="margin:0px 2px;" type="md-add" color="blue" @click.self.stop="change({key:imapKey,value:imapValue},'imap')"></Icon>
      </div>
    </AtomDrop>
  </div>
  <!-- <FieldUpload v-else-if="config.editor.type==='upload'"
    :value="editValue" :config="config" @change="value => {
      editValue = value;
      change(value);
    }"/>
  <fieldUploadBase64 v-else-if="config.editor.type==='uploadBase64'"
    :value="editValue" :config="config" @change="value => {
      editValue = value;
      change(value);
    }"/> -->
  <span v-else-if="config.editor.type==='spanDisplay'" :class="config.class" :style="config.style"
  >{{editValue}}</span>
  <Input v-else :class="config.class" :style="config.style" v-model="editValue" @on-change="change"
         :type="'text'"
         :required="false"
         :placeholder="G_PickText(config.editor.placeholder)"
         :clearable="false"
         :disabled="config.editor.disabled"
         :readonly="true"
  ></Input>
  <slot></slot>
</span>
</template>

<script>
// import fieldUpload from './fieldUpload.vue';
export default {
  name: "AtomEditor",
  // mixins: [atomMixin],
  data(){
    return {
      alert:alert,
      editValue:null,
      prependValue:null,
      appendValue:null,
      //..............
      imapShow:false,
      imapKey:'',
      imapValue:'',
      imapValueType:'s',
      //...............
      ioptionShow:false,
      ioptionLabelEN:'',
      ioptionLabelCN:'',
      ioptionValue:null,
      ioptionValueType:'s',
      ioptionPrefix:'',
      ioptionSuffix:'',
      ilangShow:false,
      ilangValueEN:'',
      ilangValueCN:'',
      iruleShow:false,
      iruleTpl:{
        required:false,
        type:'any',
        message:{
          'en-US':'',
          'zh-CN':'',
        },
        min:0,
        max:Infinity,
        trigger:'blur'
      },
      iruleIndex:-1,
      uploadList: []
    }
  },
  // components: { fieldUpload },
  model:{
    prop:'value',
    event:"change"
  },
  props:{
    config:{
      default:()=>{
        return {};
      }
    },
    value:{
      default:()=>{
        return null;
      }
    },
    internal:{
      default:()=>{
        return {};
      }
    }
  },
  computed:{
    icoOptions(){
      return [
        'ios-add',
        'md-add',
        'ios-add-circle',
        'ios-add-circle-outline',
        'md-add-circle',
        'ios-alarm',
        'ios-alarm-outline',
        'md-alarm',
        'ios-albums',
        'ios-albums-outline',
        'md-albums',
        'ios-alert',
        'ios-alert-outline',
        'md-alert',
        'ios-american-football',
        'ios-american-football-outline',
        'md-american-football',
        'ios-analytics',
        'ios-analytics-outline',
        'md-analytics',
        'logo-android',
        'logo-angular',
        'ios-aperture',
        'ios-aperture-outline',
        'md-aperture',
        'logo-apple',
        'ios-apps',
        'ios-apps-outline',
        'md-apps',
        'ios-appstore',
        'ios-appstore-outline',
        'md-appstore',
        'ios-archive',
        'ios-archive-outline',
        'md-archive',
        'ios-arrow-back',
        'md-arrow-back',
        'ios-arrow-down',
        'md-arrow-down',
        'ios-arrow-dropdown',
        'md-arrow-dropdown',
        'ios-arrow-dropdown-circle',
        'md-arrow-dropdown-circle',
        'ios-arrow-dropleft',
        'md-arrow-dropleft',
        'ios-arrow-dropleft-circle',
        'md-arrow-dropleft-circle',
        'ios-arrow-dropright',
        'md-arrow-dropright',
        'ios-arrow-dropright-circle',
        'md-arrow-dropright-circle',
        'ios-arrow-dropup',
        'md-arrow-dropup',
        'ios-arrow-dropup-circle',
        'md-arrow-dropup-circle',
        'ios-arrow-forward',
        'md-arrow-forward',
        'ios-arrow-round-back',
        'md-arrow-round-back',
        'ios-arrow-round-down',
        'md-arrow-round-down',
        'ios-arrow-round-forward',
        'md-arrow-round-forward',
        'ios-arrow-round-up',
        'md-arrow-round-up',
        'ios-arrow-up',
        'md-arrow-up',
        'ios-at',
        'ios-at-outline',
        'md-at',
        'ios-attach',
        'md-attach',
        'ios-backspace',
        'ios-backspace-outline',
        'md-backspace',
        'ios-barcode',
        'ios-barcode-outline',
        'md-barcode',
        'ios-baseball',
        'ios-baseball-outline',
        'md-baseball',
        'ios-basket',
        'ios-basket-outline',
        'md-basket',
        'ios-basketball',
        'ios-basketball-outline',
        'md-basketball',
        'ios-battery-charging',
        'md-battery-charging',
        'ios-battery-dead',
        'md-battery-dead',
        'ios-battery-full',
        'md-battery-full',
        'ios-beaker',
        'ios-beaker-outline',
        'md-beaker',
        'ios-beer',
        'ios-beer-outline',
        'md-beer',
        'ios-bicycle',
        'md-bicycle',
        'logo-bitcoin',
        'ios-bluetooth',
        'md-bluetooth',
        'ios-boat',
        'ios-boat-outline',
        'md-boat',
        'ios-body',
        'ios-body-outline',
        'md-body',
        'ios-bonfire',
        'ios-bonfire-outline',
        'md-bonfire',
        'ios-book',
        'ios-book-outline',
        'md-book',
        'ios-bookmark',
        'ios-bookmark-outline',
        'md-bookmark',
        'ios-bookmarks',
        'ios-bookmarks-outline',
        'md-bookmarks',
        'ios-bowtie',
        'ios-bowtie-outline',
        'md-bowtie',
        'ios-briefcase',
        'ios-briefcase-outline',
        'md-briefcase',
        'ios-browsers',
        'ios-browsers-outline',
        'md-browsers',
        'ios-brush',
        'ios-brush-outline',
        'md-brush',
        'logo-buffer',
        'ios-bug',
        'ios-bug-outline',
        'md-bug',
        'ios-build',
        'ios-build-outline',
        'md-build',
        'ios-bulb',
        'ios-bulb-outline',
        'md-bulb',
        'ios-bus',
        'ios-bus-outline',
        'md-bus',
        'ios-cafe',
        'ios-cafe-outline',
        'md-cafe',
        'ios-calculator',
        'ios-calculator-outline',
        'md-calculator',
        'ios-calendar',
        'ios-calendar-outline',
        'md-calendar',
        'ios-call',
        'ios-call-outline',
        'md-call',
        'ios-camera',
        'ios-camera-outline',
        'md-camera',
        'ios-car',
        'ios-car-outline',
        'md-car',
        'ios-card',
        'ios-card-outline',
        'md-card',
        'ios-cart',
        'ios-cart-outline',
        'md-cart',
        'ios-cash',
        'ios-cash-outline',
        'md-cash',
        'ios-chatboxes',
        'ios-chatboxes-outline',
        'md-chatboxes',
        'ios-chatbubbles',
        'ios-chatbubbles-outline',
        'md-chatbubbles',
        'ios-checkbox',
        'ios-checkbox-outline',
        'md-checkbox',
        'md-checkbox-outline',
        'ios-checkmark',
        'md-checkmark',
        'ios-checkmark-circle',
        'ios-checkmark-circle-outline',
        'md-checkmark-circle',
        'md-checkmark-circle-outline',
        'logo-chrome',
        'ios-clipboard',
        'ios-clipboard-outline',
        'md-clipboard',
        'ios-clock',
        'ios-clock-outline',
        'md-clock',
        'ios-close',
        'md-close',
        'ios-close-circle',
        'ios-close-circle-outline',
        'md-close-circle',
        'ios-closed-captioning',
        'ios-closed-captioning-outline',
        'md-closed-captioning',
        'ios-cloud',
        'ios-cloud-outline',
        'md-cloud',
        'ios-cloud-circle',
        'ios-cloud-circle-outline',
        'md-cloud-circle',
        'ios-cloud-done',
        'ios-cloud-done-outline',
        'md-cloud-done',
        'ios-cloud-download',
        'ios-cloud-download-outline',
        'md-cloud-download',
        'md-cloud-outline',
        'ios-cloud-upload',
        'ios-cloud-upload-outline',
        'md-cloud-upload',
        'ios-cloudy',
        'ios-cloudy-outline',
        'md-cloudy',
        'ios-cloudy-night',
        'ios-cloudy-night-outline',
        'md-cloudy-night',
        'ios-code',
        'md-code',
        'ios-code-download',
        'md-code-download',
        'ios-code-working',
        'md-code-working',
        'logo-codepen',
        'ios-cog',
        'ios-cog-outline',
        'md-cog',
        'ios-color-fill',
        'ios-color-fill-outline',
        'md-color-fill',
        'ios-color-filter',
        'ios-color-filter-outline',
        'md-color-filter',
        'ios-color-palette',
        'ios-color-palette-outline',
        'md-color-palette',
        'ios-color-wand',
        'ios-color-wand-outline',
        'md-color-wand',
        'ios-compass',
        'ios-compass-outline',
        'md-compass',
        'ios-construct',
        'ios-construct-outline',
        'md-construct',
        'ios-contact',
        'ios-contact-outline',
        'md-contact',
        'ios-contacts',
        'ios-contacts-outline',
        'md-contacts',
        'ios-contract',
        'md-contract',
        'ios-contrast',
        'md-contrast',
        'ios-copy',
        'ios-copy-outline',
        'md-copy',
        'ios-create',
        'ios-create-outline',
        'md-create',
        'ios-crop',
        'ios-crop-outline',
        'md-crop',
        'logo-css3',
        'ios-cube',
        'ios-cube-outline',
        'md-cube',
        'ios-cut',
        'ios-cut-outline',
        'md-cut',
        'logo-designernews',
        'ios-desktop',
        'ios-desktop-outline',
        'md-desktop',
        'ios-disc',
        'ios-disc-outline',
        'md-disc',
        'ios-document',
        'ios-document-outline',
        'md-document',
        'ios-done-all',
        'md-done-all',
        'ios-download',
        'ios-download-outline',
        'md-download',
        'logo-dribbble',
        'logo-dropbox',
        'ios-easel',
        'ios-easel-outline',
        'md-easel',
        'ios-egg',
        'ios-egg-outline',
        'md-egg',
        'logo-euro',
        'ios-exit',
        'ios-exit-outline',
        'md-exit',
        'ios-expand',
        'md-expand',
        'ios-eye',
        'ios-eye-outline',
        'md-eye',
        'ios-eye-off',
        'ios-eye-off-outline',
        'md-eye-off',
        'logo-facebook',
        'ios-fastforward',
        'ios-fastforward-outline',
        'md-fastforward',
        'ios-female',
        'md-female',
        'ios-filing',
        'ios-filing-outline',
        'md-filing',
        'ios-film',
        'ios-film-outline',
        'md-film',
        'ios-finger-print',
        'md-finger-print',
        'ios-flag',
        'ios-flag-outline',
        'md-flag',
        'ios-flame',
        'ios-flame-outline',
        'md-flame',
        'ios-flash',
        'ios-flash-outline',
        'md-flash',
        'ios-flask',
        'ios-flask-outline',
        'md-flask',
        'ios-flower',
        'ios-flower-outline',
        'md-flower',
        'ios-folder',
        'ios-folder-outline',
        'md-folder',
        'ios-folder-open',
        'ios-folder-open-outline',
        'md-folder-open',
        'ios-football',
        'ios-football-outline',
        'md-football',
        'logo-foursquare',
        'logo-freebsd-devil',
        'ios-funnel',
        'ios-funnel-outline',
        'md-funnel',
        'ios-game-controller-a',
        'ios-game-controller-a-outline',
        'md-game-controller-a',
        'ios-game-controller-b',
        'ios-game-controller-b-outline',
        'md-game-controller-b',
        'ios-git-branch',
        'md-git-branch',
        'ios-git-commit',
        'md-git-commit',
        'ios-git-compare',
        'md-git-compare',
        'ios-git-merge',
        'md-git-merge',
        'ios-git-network',
        'md-git-network',
        'ios-git-pull-request',
        'md-git-pull-request',
        'logo-github',
        'ios-glasses',
        'ios-glasses-outline',
        'md-glasses',
        'ios-globe',
        'ios-globe-outline',
        'md-globe',
        'logo-google',
        'logo-googleplus',
        'ios-grid',
        'ios-grid-outline',
        'md-grid',
        'logo-hackernews',
        'ios-hammer',
        'ios-hammer-outline',
        'md-hammer',
        'ios-hand',
        'ios-hand-outline',
        'md-hand',
        'ios-happy',
        'ios-happy-outline',
        'md-happy',
        'ios-headset',
        'ios-headset-outline',
        'md-headset',
        'ios-heart',
        'ios-heart-outline',
        'md-heart',
        'md-heart-outline',
        'ios-help',
        'md-help',
        'ios-help-buoy',
        'ios-help-buoy-outline',
        'md-help-buoy',
        'ios-help-circle',
        'ios-help-circle-outline',
        'md-help-circle',
        'ios-home',
        'ios-home-outline',
        'md-home',
        'logo-html5',
        'ios-ice-cream',
        'ios-ice-cream-outline',
        'md-ice-cream',
        'ios-image',
        'ios-image-outline',
        'md-image',
        'ios-images',
        'ios-images-outline',
        'md-images',
        'ios-infinite',
        'ios-infinite-outline',
        'md-infinite',
        'ios-information',
        'md-information',
        'ios-information-circle',
        'ios-information-circle-outline',
        'md-information-circle',
        'logo-instagram',
        'ios-ionic',
        'ios-ionic-outline',
        'md-ionic',
        'ios-ionitron',
        'ios-ionitron-outline',
        'md-ionitron',
        'logo-javascript',
        'ios-jet',
        'ios-jet-outline',
        'md-jet',
        'ios-key',
        'ios-key-outline',
        'md-key',
        'ios-keypad',
        'ios-keypad-outline',
        'md-keypad',
        'ios-laptop',
        'md-laptop',
        'ios-leaf',
        'ios-leaf-outline',
        'md-leaf',
        'ios-link',
        'ios-link-outline',
        'md-link',
        'logo-linkedin',
        'ios-list',
        'md-list',
        'ios-list-box',
        'ios-list-box-outline',
        'md-list-box',
        'ios-locate',
        'ios-locate-outline',
        'md-locate',
        'ios-lock',
        'ios-lock-outline',
        'md-lock',
        'ios-log-in',
        'md-log-in',
        'ios-log-out',
        'md-log-out',
        'ios-magnet',
        'ios-magnet-outline',
        'md-magnet',
        'ios-mail',
        'ios-mail-outline',
        'md-mail',
        'ios-mail-open',
        'ios-mail-open-outline',
        'md-mail-open',
        'ios-male',
        'md-male',
        'ios-man',
        'ios-man-outline',
        'md-man',
        'ios-map',
        'ios-map-outline',
        'md-map',
        'logo-markdown',
        'ios-medal',
        'ios-medal-outline',
        'md-medal',
        'ios-medical',
        'ios-medical-outline',
        'md-medical',
        'ios-medkit',
        'ios-medkit-outline',
        'md-medkit',
        'ios-megaphone',
        'ios-megaphone-outline',
        'md-megaphone',
        'ios-menu',
        'ios-menu-outline',
        'md-menu',
        'ios-mic',
        'ios-mic-outline',
        'md-mic',
        'ios-mic-off',
        'ios-mic-off-outline',
        'md-mic-off',
        'ios-microphone',
        'ios-microphone-outline',
        'md-microphone',
        'ios-moon',
        'ios-moon-outline',
        'md-moon',
        'ios-more',
        'ios-more-outline',
        'md-more',
        'ios-move',
        'md-move',
        'ios-musical-note',
        'ios-musical-note-outline',
        'md-musical-note',
        'ios-musical-notes',
        'ios-musical-notes-outline',
        'md-musical-notes',
        'ios-navigate',
        'ios-navigate-outline',
        'md-navigate',
        'ios-no-smoking',
        'ios-no-smoking-outline',
        'md-no-smoking',
        'logo-nodejs',
        'ios-notifications',
        'ios-notifications-outline',
        'md-notifications',
        'ios-notifications-off',
        'ios-notifications-off-outline',
        'md-notifications-off',
        'md-notifications-outline',
        'ios-nuclear',
        'ios-nuclear-outline',
        'md-nuclear',
        'ios-nutrition',
        'ios-nutrition-outline',
        'md-nutrition',
        'logo-octocat',
        'ios-open',
        'ios-open-outline',
        'md-open',
        'ios-options',
        'ios-options-outline',
        'md-options',
        'ios-outlet',
        'ios-outlet-outline',
        'md-outlet',
        'ios-paper',
        'ios-paper-outline',
        'md-paper',
        'ios-paper-plane',
        'ios-paper-plane-outline',
        'md-paper-plane',
        'ios-partly-sunny',
        'ios-partly-sunny-outline',
        'md-partly-sunny',
        'ios-pause',
        'ios-pause-outline',
        'md-pause',
        'ios-paw',
        'ios-paw-outline',
        'md-paw',
        'ios-people',
        'ios-people-outline',
        'md-people',
        'ios-person',
        'ios-person-outline',
        'md-person',
        'ios-person-add',
        'ios-person-add-outline',
        'md-person-add',
        'ios-phone-landscape',
        'md-phone-landscape',
        'ios-phone-portrait',
        'md-phone-portrait',
        'ios-photos',
        'ios-photos-outline',
        'md-photos',
        'ios-pie',
        'ios-pie-outline',
        'md-pie',
        'ios-pin',
        'ios-pin-outline',
        'md-pin',
        'ios-pint',
        'ios-pint-outline',
        'md-pint',
        'logo-pinterest',
        'ios-pizza',
        'ios-pizza-outline',
        'md-pizza',
        'ios-plane',
        'ios-plane-outline',
        'md-plane',
        'ios-planet',
        'ios-planet-outline',
        'md-planet',
        'ios-play',
        'ios-play-outline',
        'md-play',
        'logo-playstation',
        'ios-podium',
        'ios-podium-outline',
        'md-podium',
        'ios-power',
        'ios-power-outline',
        'md-power',
        'ios-pricetag',
        'ios-pricetag-outline',
        'md-pricetag',
        'ios-pricetags',
        'ios-pricetags-outline',
        'md-pricetags',
        'ios-print',
        'ios-print-outline',
        'md-print',
        'ios-pulse',
        'ios-pulse-outline',
        'md-pulse',
        'logo-python',
        'ios-qr-scanner',
        'md-qr-scanner',
        'ios-quote',
        'ios-quote-outline',
        'md-quote',
        'ios-radio',
        'ios-radio-outline',
        'md-radio',
        'ios-radio-button-off',
        'md-radio-button-off',
        'ios-radio-button-on',
        'md-radio-button-on',
        'ios-rainy',
        'ios-rainy-outline',
        'md-rainy',
        'ios-recording',
        'ios-recording-outline',
        'md-recording',
        'logo-reddit',
        'ios-redo',
        'ios-redo-outline',
        'md-redo',
        'ios-refresh',
        'md-refresh',
        'ios-refresh-circle',
        'ios-refresh-circle-outline',
        'md-refresh-circle',
        'ios-remove',
        'md-remove',
        'ios-remove-circle',
        'ios-remove-circle-outline',
        'md-remove-circle',
        'ios-reorder',
        'md-reorder',
        'ios-repeat',
        'md-repeat',
        'ios-resize',
        'md-resize',
        'ios-restaurant',
        'ios-restaurant-outline',
        'md-restaurant',
        'ios-return-left',
        'md-return-left',
        'ios-return-right',
        'md-return-right',
        'ios-reverse-camera',
        'ios-reverse-camera-outline',
        'md-reverse-camera',
        'ios-rewind',
        'ios-rewind-outline',
        'md-rewind',
        'ios-ribbon',
        'ios-ribbon-outline',
        'md-ribbon',
        'ios-rose',
        'ios-rose-outline',
        'md-rose',
        'logo-rss',
        'ios-sad',
        'ios-sad-outline',
        'md-sad',
        'logo-sass',
        'ios-school',
        'ios-school-outline',
        'md-school',
        'ios-search',
        'ios-search-outline',
        'md-search',
        'ios-send',
        'ios-send-outline',
        'md-send',
        'ios-settings',
        'ios-settings-outline',
        'md-settings',
        'ios-share',
        'ios-share-outline',
        'md-share',
        'ios-share-alt',
        'ios-share-alt-outline',
        'md-share-alt',
        'ios-shirt',
        'ios-shirt-outline',
        'md-shirt',
        'ios-shuffle',
        'md-shuffle',
        'ios-skip-backward',
        'ios-skip-backward-outline',
        'md-skip-backward',
        'ios-skip-forward',
        'ios-skip-forward-outline',
        'md-skip-forward',
        'logo-skype',
        'logo-snapchat',
        'ios-snow',
        'ios-snow-outline',
        'md-snow',
        'ios-speedometer',
        'ios-speedometer-outline',
        'md-speedometer',
        'ios-square',
        'ios-square-outline',
        'md-square',
        'md-square-outline',
        'ios-star',
        'ios-star-outline',
        'md-star',
        'ios-star-half',
        'md-star-half',
        'md-star-outline',
        'ios-stats',
        'ios-stats-outline',
        'md-stats',
        'logo-steam',
        'ios-stopwatch',
        'ios-stopwatch-outline',
        'md-stopwatch',
        'ios-subway',
        'ios-subway-outline',
        'md-subway',
        'ios-sunny',
        'ios-sunny-outline',
        'md-sunny',
        'ios-swap',
        'md-swap',
        'ios-switch',
        'ios-switch-outline',
        'md-switch',
        'ios-sync',
        'md-sync',
        'ios-tablet-landscape',
        'md-tablet-landscape',
        'ios-tablet-portrait',
        'md-tablet-portrait',
        'ios-tennisball',
        'ios-tennisball-outline',
        'md-tennisball',
        'ios-text',
        'ios-text-outline',
        'md-text',
        'ios-thermometer',
        'ios-thermometer-outline',
        'md-thermometer',
        'ios-thumbs-down',
        'ios-thumbs-down-outline',
        'md-thumbs-down',
        'ios-thumbs-up',
        'ios-thumbs-up-outline',
        'md-thumbs-up',
        'ios-thunderstorm',
        'ios-thunderstorm-outline',
        'md-thunderstorm',
        'ios-time',
        'ios-time-outline',
        'md-time',
        'ios-timer',
        'ios-timer-outline',
        'md-timer',
        'ios-train',
        'ios-train-outline',
        'md-train',
        'ios-transgender',
        'md-transgender',
        'ios-trash',
        'ios-trash-outline',
        'md-trash',
        'ios-trending-down',
        'md-trending-down',
        'ios-trending-up',
        'md-trending-up',
        'ios-trophy',
        'ios-trophy-outline',
        'md-trophy',
        'logo-tumblr',
        'logo-tux',
        'logo-twitch',
        'logo-twitter',
        'ios-umbrella',
        'ios-umbrella-outline',
        'md-umbrella',
        'ios-undo',
        'ios-undo-outline',
        'md-undo',
        'ios-unlock',
        'ios-unlock-outline',
        'md-unlock',
        'logo-usd',
        'ios-videocam',
        'ios-videocam-outline',
        'md-videocam',
        'logo-vimeo',
        'ios-volume-down',
        'md-volume-down',
        'ios-volume-mute',
        'md-volume-mute',
        'ios-volume-off',
        'md-volume-off',
        'ios-volume-up',
        'md-volume-up',
        'ios-walk',
        'md-walk',
        'ios-warning',
        'ios-warning-outline',
        'md-warning',
        'ios-watch',
        'md-watch',
        'ios-water',
        'ios-water-outline',
        'md-water',
        'logo-whatsapp',
        'ios-wifi',
        'ios-wifi-outline',
        'md-wifi',
        'logo-windows',
        'ios-wine',
        'ios-wine-outline',
        'md-wine',
        'ios-woman',
        'ios-woman-outline',
        'md-woman',
        'logo-wordpress',
        'logo-xbox',
        'logo-yahoo',
        'logo-yen',
        'logo-youtube',
        'ios-loading',
    ]
    },
    rulesType(){
      return [
        'any',
        'string',
        'date',
        'number'
      ]
    }
  },
  watch:{
    'value':function(newVal){
      this.initValue();
    },
  },
  mounted() {
    this.initValue();
    
  },
  methods:{
    initValue(){
      if(this.config.editor.type==='imap'){
        this.editValue=JSON.stringify(this.value);
        // this.editValue = this.value;
      }else if(this.config.editor.type==='array'&&Array.isArray(this.value)){
        this.editValue=this.value.join(',');
      }else if(this.config.editor.type==='numberArray'&&Array.isArray(this.value)){
        this.editValue=this.value.join(',');
      }else if(this.config.editor.type==='pi'){
        this.editValue=this.value/Math.PI*180
      }else if(this.config.editor.type==='textCompase'){
        let value=this.value;
        if(!!this.config.editor.prependText&&!!value&&value.startsWith(this.config.editor.prependText)&&this.config.editor.includePrepend){
          value=value.substring(this.config.editor.prepend.length);
        }
        if(!!this.config.editor.appendText&&!!value&&value.endsWith(this.config.editor.appendText)&&this.config.editor.includeAppend){
          value=value.substring(0,value.length-this.config.editor.append.length);
        }
        this.editValue=value;
      }else if(this.config.editor.type==='textPrepend'){
        let value=this.value;
        if(!!this.config.editor.prependText&&!!value&&value.startsWith(this.config.editor.prependText)&&this.config.editor.includePrepend){
          value=value.substring(this.config.editor.prependText.length);
        }
        this.editValue=value;
      }else if(this.config.editor.type==='textAppend'){
        let value=this.value;
        if(!!this.config.editor.appendText&&!!value&&value.endsWith(this.config.editor.appendText)&&this.config.editor.includeAppend){
          value=value.substring(0,value.length-this.config.editor.appendText.length);
        }
        this.editValue=value;
      }else if(this.config.editor.type==='textSelect'){
        if(Array.isArray(this.value)){
          if(!!this.config.editor.prepend){
            this.prependValue=this.value[0];
            this.editValue=this.value[1];
            if(!!this.config.editor.append){
              this.appendValue=this.value[2];
            }else{
              this.appendValue=null;
            }
          }else{
            this.prependValue=null;
            this.editValue=this.value[0];
            if(!!this.config.editor.append){
              this.appendValue=this.value[1];
            }else{
              this.appendValue=null;
            }
          }
        }else{
          this.editValue=''
        }
        
      }else{
        this.editValue=this.value;
      }
    },
    // change:
      // lodash.debounce(function(value,editor){
      //   this.changeTrigger(value,editor)
      // },500),
    change(value,editor){
      let newValue=this.editValue;
      let pre='',ap='';
      switch(editor){
        case 'array':
          newValue = this.editValue.split(',')
          break;
        case 'numberArray':
          newValue = this.editValue.split(',')
          newValue.forEach((v,i)=>{
            newValue[i]=Number(v)
          })
          break;
        case 'cascader':
          newValue = value
          break;
        case 'pi':
          newValue = value.target.value/180*Math.PI
          break;
        case 'textCompase':
          if(this.config.editor.includePrepend){
            pre=this.config.editor.prepend?this.config.editor.prepend:'';
          }
          if(this.config.editor.includeAppend){
            ap=this.config.editor.append?this.config.editor.append:'';
          }
          newValue = pre+this.editValue+ap
          break;
        case 'textPrepend':
          if(this.config.editor.includePrepend){
            pre=this.config.editor.prependText?this.config.editor.prependText:'';
          }
          newValue = pre+this.editValue
          break;
        case 'textAppend':
          if(this.config.editor.includeAppend){
            ap=this.config.editor.appendText?this.config.editor.appendText:'';
          }
          newValue = this.editValue+ap
          break;
        case 'textSelect':
          let val=[];
          if(!!this.config.editor.prepend){
            val[0]=this.prependValue?this.prependValue:'';
            val[1]=this.editValue;
            if(!!this.config.editor.append){
              val[2]=this.appendValue?this.appendValue:'';
            }
          }else{
            val[0]=this.editValue;
            if(!!this.config.editor.append){
              val[1]=this.appendValue?this.appendValue:'';
            }
          }
          newValue = val;
          break;
        case 'imap':
          if(!value.key) return false;
          if(value.value===null||value.value===undefined){
            this.$set(this.value,value.key,'');
          }else{
            this.$set(this.value,value.key,this.imapValue);
          };
          this.imapKey='';
          this.imapValue=null;
          this.editValue=JSON.stringify(this.value);
          // this.editValue = this.value;
          newValue = this.value
          break;
        default:
          newValue = this.editValue
          break;
      }
      // this.ins.listeners.change(newValue);
      this.$emit('change',newValue)
    },
    G_PickText(text){
      if(!text) return '';
      if(!!text&&(!!text[this.G_Locale]||text[this.G_Locale]=='')){
        return text[this.G_Locale]
      }else{
        return text;
      }
    },
  }
}
</script>
